<%--
  Created by IntelliJ IDEA.
  User: 25131
  Date: 2021/10/7
  Time: 8:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/OrderDetails.css">

</head>

<body>

<!--最上面的导航-->
<jsp:include page="../common/header.jsp" flush="true"/>

<div id="o-header-2013">
    <div id="header-2013" style="display:none;"></div>
</div>

<!-- 下面的带 logo 的部分 -->
<div id="nav">
    <div class="w">

        <!-- logo 部分 -->
        <div class="logo">
            <a href="" class="fore11" target="_blank"></a>
            <a href="" class="fore22" target="_blank">我的树懒</a>
            <a href="http://localhost:8080/shulanmiaosha/product/generalMerchandise.jsp" class="fore33"
               target="_blank">返回树懒首页</a>
        </div>

        <!-- 我的购物车部分样式 -->
        <div class="nav-r zidingyiright">
            <div id="settleup-2014" class="dorpdown">
                <a href="${pageContext.request.contextPath}/shopcar" target="_blank">
                    <div class="cw-icon" id="zidingyi">
                        <i class="ci-left"></i>
                        <%--                        <i class="ci-right">></i>--%>
                        <!--<i class="ci-count" id="shopping-amount">28</i>-->
                        <span style="left: 20px;position: absolute;">我的购物车</span>
                    </div>
                </a>

            </div>
        </div>

    </div>
</div>
<%--<div id="nav">
    <div class="w">

        <!-- logo 部分 -->
        <div class="logo">
            <a href="" class="fore11" target="_blank"></a>
            <a href="javascript:;" class="fore22">我的树懒</a>
            <a href="${pageContext.request.contextPath}/product/generalMerchandise.jsp" class="fore33" target="_blank">返回树懒首页</a>
        </div>

        <!-- 我的购物车部分样式 -->
        <div class="nav-r zidingyiright">
            <div id="settleup-2014" class="dorpdown">
                <div class="cw-icon" id="zidingyi">
                    <i class="ci-left"></i>
                    <i class="ci-right">></i>
                    <!--<i class="ci-count" id="shopping-amount">28</i>-->
                    <a href="" target="_blank">我的购物车</a>
                </div>
            </div>
        </div>

    </div>
</div>--%>

<!--主体部分-->
<div id="container">

    <!--提示信息-->
    <div class="emph-wrap">
        <div class="w">
            <div class="emph-tips">
                <b></b>
                安全提醒：为了您的财产安全，
                <strong>不要点击陌生链接、不要向陌生人转账</strong>
                或透漏银行卡和验证码信息，
                <strong>谨防诈骗</strong>
                ！
            </div>
        </div>
    </div>

    <!-- 订单信息大盒子 -->
    <div class="w">
        <div class="main">
            <div class="breadcrumb">
                <a href="javascript:;">我的树懒</a>
                <span>
                          &nbsp;>&nbsp;
                          <a href="">订单中心</a>
                          &nbsp;>&nbsp;
                          <strong>订单：</strong>
                          <span> <strong>${myorder.orderNo}</strong> </span>
                      </span>
            </div>

            <!-- 变量 -->
            <span id="pay-button-order" style="display:none"></span>

            <!-- 下面显示信息的盒子（是未付款） -->
            <c:if test="${orderDetails.odStates == 0}">
                <div class="m order-state order-state01">
                    <div class="mc state-cont">

                        <!-- 工具条 -->
                        <div class="state-lcol">
                            <div class="state-top">订单号：228641264530</div>
                            <h3 class="state-txt ftx-01">等待付款</h3>
                            <!-- 后面的时间是 time="86392" -->
                            <span class="remain-time" style ontimeupdate="86392" >
                            <b></b>
                            <span id="hahahaTime"></span>

                                <!-- 剩余时间，根据下单时间和当前时间进行计时 -->
                                <!-- 数据库中返回的下单时间 -->
                            <%-- ${myorder.orderDate} --%>
                            <script>

                                function remainingTime()
                                {
                                    var currentTime = new Date();  // 当前时间
                                    var orderTime = new Date("${myorder.orderDate}");  // 下单时间

                                    var timeDifference = orderTime.getTime() + 24*60*60*1000+10*60*60*1000 - currentTime.getTime();

                                    var displayTime = timeDifference / 1000;
                                    var leftHour = displayTime / ( 60 * 60 ) % 24;  // 小时
                                    leftHour = Math.floor(leftHour);
                                    var leftMinute = displayTime / 60 % 60;  // 分钟
                                    leftMinute = Math.floor(leftMinute);
                                    var leftSecond = displayTime % 60;  // 秒
                                    leftSecond = Math.floor(leftSecond);
                                    var elementById = document.getElementById("hahahaTime");
                                    elementById.innerHTML = "剩余" + leftHour + "时" + leftMinute + "分" + leftSecond + "秒";
                                }

                                // remainingTime();
                                setInterval(remainingTime,1000);

                            </script>

                        </span>
                            <!-- 下方的付款、找人支付、查看发票的盒子（都不显示） -->
                            <div class="state-btns">
                                <a href="#none" id="pay-button-228641264530" class="btn-11 " baina="0">付款</a>
<%--                                <a href="" class="btn-9" target="_blank">找人代付</a>--%>
<%--                                <a href="" target="_blank" class="btn-9">查看发票详情</a>--%>
                            </div>

                            <!-- 打印订单、取消订单盒子（可能不显示） -->
                            <div class="state-bottom">
                                <a href="" class="btn-print hide" style="display: inline;" target="_blank">
                                    <b></b>
                                    打印订单
                                </a>
                                <!-- 取消订单 -->
                                <a href="#none" class="btn-del hide" style="display: inline;">
                                    <b></b>
                                    取消订单
                                </a>
                            </div>
                        </div>

                        <!-- 进度条 -->
                        <div class="state-rcol">
                            <div class="state-rtop">
                                <!-- 提示信息 -->
                                <div class="ftx-03">
                                    该订单会为您保留24.0小时（从下单之日算起），24.0小时之后如果还未付款，系统将自动取消该订单。
                                </div>
                            </div>

                            <!-- 进度条 -->
                            <div id="process-04" class="order-process order-strike-process">
                                <div class="node ready">
                                    <i class="node-icon icon-start"></i>
                                    <ul>
                                        <li class="txt1">&nbsp;</li>
                                        <li class="txt2">提交订单</li>
                                        <li id="track_time_0" class="txt3">
                                            <fmt:formatDate value="${myorder.orderDate}" pattern="yyyy-MM-dd"/>
                                            <br>
                                            <fmt:formatDate value="${myorder.orderDate}" pattern="HH:mm:ss"/>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 提交订单 支付成功 之间的红色横线 -->
                                <div class="proce doing">
                                    <ul>
                                        <li class="txt1">等待付款</li>
                                    </ul>
                                </div>
                                <!-- 付款成功的盒子 -->
                                <div class="node wait">
                                    <i class="node-icon icon-pay"></i>
                                    <ul>
                                        <li class="txt1">&nbsp;</li>
                                        <li class="txt2">付款成功</li>
                                        <li class="txt3"></li>
                                    </ul>
                                </div>
                                <!-- 付款成功 商品出库 之间的横线 -->
                                <div class="proce wait">
                                    <ul>
                                        <li class="txt1">&nbsp;</li>
                                    </ul>
                                </div>

                                <!-- 商品出库 -->
                                <div class="node wait">
                                    <i class="node-icon icon-store"></i>
                                    <ul>
                                        <li class="txt1">&nbsp;</li>
                                        <li class="txt2">商品出库</li>
                                        <li class="txt3">&nbsp;</li>
                                    </ul>
                                </div>

                                <!-- 商品出库 等待收货之间横线 -->
                                <div class="proce wait">
                                    <ul>
                                        <li class="txt1">&nbsp;</li>
                                    </ul>
                                </div>

                                <!-- 等待收货 -->
                                <div class="node wait">
                                    <i class="node-icon icon-express"></i>
                                    <ul>
                                        <li class="txt1">&nbsp;</li>
                                        <li class="txt2">等待收货</li>
                                        <li class="txt3">&nbsp;</li>
                                    </ul>
                                </div>

                                <!-- 等待收货、完成 之间横线 -->
                                <div class="proce wait">
                                    <ul>
                                        <li class="txt1">&nbsp;</li>
                                    </ul>
                                </div>

                                <!-- 完成订单 -->
                                <div class="node wait">
                                    <i class="node-icon icon-finish"></i>
                                    <ul>
                                        <li class="txt1">&nbsp;</li>
                                        <li class="txt2">完成</li>
                                        <li class="txt3">&nbsp;</li>
                                    </ul>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </c:if>


            <!-- 下面显示信息的盒子（不是未付款） -->
            <c:if test="${orderDetails.odStates != 0}">
                <div class="m order-state order-state01 order-state02">
                    <div class="mc state-cont">


                        <%-- 如果是未支付，显示的是未支付 --%>
                        <%-- 如果是已支付，显示的是已支付 --%>
                        <%-- 如果是未发货，显示的是未发货 --%>
                        <%-- 如果是已发货，显示的是请等待 --%>
                        <%-- 如果是已完成，未评价，显示的是去评价 --%>
                        <%-- 如果是已完成，已评价，显示的是完成 --%>
                        <!-- 工具条 -->
                        <div class="state-lcol">
                            <div class="state-top">订单号：213938053900</div>
                            <h3 class="state-txt ftx-02">

                                <c:if test="${orderDetails.odStates == -1}">
                                    <%-- 空的 --%>
                                    已取消
                                </c:if>

                                <c:if test="${orderDetails.odStates == 1}">
                                    待发货
                                </c:if>

                                <c:if test="${orderDetails.odStates == 2}">
                                    待收货
                                </c:if>

                                <c:if test="${orderDetails.odStates == 3}">
                                    完成
                                </c:if>

                                <c:if test="${orderDetails.odStates == 4}">
                                    已完成
                                </c:if>

                            </h3>
                            <br>
                            <span class="remain-time" style="display: none" time>
                                      <b></b>
                                  </span>

                            <!-- 评价查看发票详情盒子 -->
                            <div class="state-btns">
                                <a href="#none" id="pay-button-213938053900" class="btn-1 " style="display:none">付款</a>
                                <!--<a href="" target="_blank" class="btn-9">查看发票详情</a>-->

                                <!-- 提示信息 -->

                                <c:if test="${orderDetails.odStates == -1}">
                                    <a href="#none" class="btn-11">
                                        已取消
                                    </a>
                                </c:if>

                                <c:if test="${orderDetails.odStates == 1}">
                                    <a href="#none" class="btn-1">
                                        待发货
                                    </a>
                                </c:if>

                                <c:if test="${orderDetails.odStates == 2}">
                                    <a href="#none" class="btn-1">
                                        待收货
                                    </a>
                                </c:if>

                                <c:if test="${orderDetails.odStates == 3}">
                                    <a href="#none" class="btn-1">
                                        待评价
                                    </a>
                                </c:if>

                                <c:if test="${orderDetails.odStates == 4}">
                                    <a href="#none" class="btn-1">
                                        已完成
                                    </a>
                                </c:if>


                            </div>

                            <!-- 左侧取消订单 -->
                            <div class="state-bottom">

                                <!-- 打印订单（不显示） -->
                                <a href="" class="btn-print hide" target="_blank" style="display: inline;">
                                    <b></b>
                                    打印订单
                                </a>

                                <!-- 取消订单 -->
                                <a href="#none" class="btn-del hide">
                                    <b></b>
                                    取消订单
                                </a>

                            </div>

                        </div>

                        <!-- 进度条 -->
                        <div class="state-rcol">

                            <%-- 待发货 --%>
                            <!-- 待发货展示 -->
                            <c:if test="${orderDetails.odStates == 1}">

                                <div class="state-rtop" >

                                    <!-- 提示信息 -->
                                    <div class="ftx-03">
                                        订单已经支付成功，并且已经发货，请您耐心等待，预计四天后到达。
                                    </div>
                                </div>

                                <!-- 进度条 -->
                                <div id="process-04" class="order-process">

                                    <!-- 提交订单上的图标 -->
                                    <div class="node daipingjia">
                                        <i class="node-icon icon-start"></i>

                                        <!-- 图标下的字体显示 -->
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">提交订单</li>
                                            <li id="track_time_00" class="txt3">
                                                <fmt:formatDate value="${myorder.orderDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${myorder.orderDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>

                                    </div>


                                    <!-- 提交订单到付款成功中间的横线 -->
                                    <div class="proce done">
                                        <ul>
                                            <li class="txt1"></li>
                                        </ul>
                                    </div>


                                    <!-- 付款成功 -->
                                    <div class="node ready">

                                        <!-- 图标样式 -->
                                        <i class="node-icon daipingjia1"></i>

                                        <!-- 下方的付款成功的字体 -->
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">付款成功</li>
                                            <li id="track_time_4" class="txt3">
                                                <fmt:formatDate value="${orderDetails.odPayDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${orderDetails.odPayDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>
                                    </div>


                                    <!-- 两个状态之间的横线 -->
                                    <div class="proce ready">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 商品出库时间 -->
                                    <div class="node wait">
                                        <i class="node-icon icon-store"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">商品出库</li>
                                            <li id="track_time_1" class="txt3">
                                                <br>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 商品出库与等待收货两个状态之间连接的横线 -->
                                    <div class="proce wait">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 等待收货状态信息 -->
                                    <div class="node wait">
                                        <i class="node-icon icon-express"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">等待收货</li>
                                            <li id="track_time_5" class="txt3">
                                                <br>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 等待收获与完成两个状态之间的横下 -->
                                    <div class="proce wait">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 完成状态 -->
                                    <div class="node wait">
                                        <i class="node-icon icon-finish"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">完成</li>
                                            <li id="track_time_6" class="txt3">
                                                <br>
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                            </c:if>

                            <%-- 待收货 --%>
                            <!-- 待收货展示 -->
                            <c:if test="${orderDetails.odStates == 2}">

                                <div class="state-rtop" >

                                    <!-- 提示信息 -->
                                    <div class="ftx-03">
                                        订单已经支付成功，并且已经发货，请您耐心等待，预计四天后到达。
                                    </div>
                                </div>

                                <!-- 进度条 -->
                                <div id="process-04" class="order-process">

                                    <!-- 提交订单上的图标 -->
                                    <div class="node daipingjia">
                                        <i class="node-icon icon-start"></i>

                                        <!-- 图标下的字体显示 -->
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">提交订单</li>
                                            <li id="track_time_00" class="txt3">
                                                <fmt:formatDate value="${myorder.orderDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${myorder.orderDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>

                                    </div>


                                    <!-- 提交订单到付款成功中间的横线 -->
                                    <div class="proce done">
                                        <ul>
                                            <li class="txt1"></li>
                                        </ul>
                                    </div>


                                    <!-- 付款成功 -->
                                    <div class="node ready">

                                        <!-- 图标样式 -->
                                        <i class="node-icon daipingjia1"></i>

                                        <!-- 下方的付款成功的字体 -->
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">付款成功</li>
                                            <li id="track_time_4" class="txt3">
                                                <fmt:formatDate value="${orderDetails.odPayDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${orderDetails.odPayDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>
                                    </div>


                                    <!-- 两个状态之间的横线 -->
                                    <div class="proce done">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 商品出库时间 -->
                                    <div class="node ready">
                                        <i class="node-icon daipingjia2"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">商品出库</li>
                                            <li id="track_time_1" class="txt3">
                                                <fmt:formatDate value="${orderDetails.odSendData}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${orderDetails.odSendData}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 商品出库与等待收货两个状态之间连接的横线 -->
                                    <div class="proce ready">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 等待收货状态信息 -->
                                    <div class="node wait">
                                        <i class="node-icon icon-express"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">等待收货</li>
                                            <li id="track_time_5" class="txt3">
                                                <br>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 等待收获与完成两个状态之间的横下 -->
                                    <div class="proce wait">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 完成状态 -->
                                    <div class="node wait">
                                        <i class="node-icon icon-finish"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">完成</li>
                                            <li id="track_time_6" class="txt3">
                                                <br>
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                            </c:if>

                            <%-- 完成 --%>
                            <!-- 这个是完成订单的显示页面，从下订单到评价完成，中间的页面显示都要进行改变 -->
                            <c:if test="${orderDetails.odStates == 3}">

                                <div class="state-rtop" >

                                    <!-- 提示信息 -->
                                    <div class="ftx-03">
                                        订单已经完成，感谢您在树懒商城购物，欢迎您对本次交易及所购商品进行评价。
                                    </div>
                                </div>

                                <!-- 进度条 -->
                                <div id="process-04" class="order-process">

                                    <!-- 提交订单上的图标 -->
                                    <div class="node daipingjia">
                                        <i class="node-icon icon-start"></i>

                                        <!-- 图标下的字体显示 -->
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">提交订单</li>
                                            <li id="track_time_00" class="txt3">
                                                <fmt:formatDate value="${myorder.orderDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${myorder.orderDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>

                                    </div>


                                    <!-- 提交订单到付款成功中间的横线 -->
                                    <div class="proce done">
                                        <ul>
                                            <li class="txt1"></li>
                                        </ul>
                                    </div>


                                    <!-- 付款成功 -->
                                    <div class="node ready">

                                        <!-- 图标样式 -->
                                        <i class="node-icon daipingjia1"></i>

                                        <!-- 下方的付款成功的字体 -->
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">付款成功</li>
                                            <li id="track_time_4" class="txt3">
                                                <fmt:formatDate value="${orderDetails.odPayDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${orderDetails.odPayDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>
                                    </div>


                                    <!-- 两个状态之间的横线 -->
                                    <div class="proce done">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 商品出库时间 -->
                                    <div class="node ready">
                                        <i class="node-icon daipingjia2"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">商品出库</li>
                                            <li id="track_time_1" class="txt3">
                                                <fmt:formatDate value="${orderDetails.odSendData}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${orderDetails.odSendData}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 商品出库与等待收货两个状态之间连接的横线 -->
                                    <div class="proce done">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 等待收货状态信息 -->
                                    <div class="node ready">
                                        <i class="node-icon daipingjia"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">等待收货</li>
                                            <li id="track_time_5" class="txt3">
                                                <fmt:formatDate value="${orderDetails.odReceiveDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${orderDetails.odReceiveDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 等待收获与完成两个状态之间的横下 -->
                                    <div class="proce done">
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                        </ul>
                                    </div>

                                    <!-- 完成状态 -->
                                    <div class="node ready">
                                        <i class="node-icon daipingjiahh"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">完成</li>
                                            <li id="track_time_6" class="txt3">
                                                <fmt:formatDate value="${orderDetails.odFinishDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${orderDetails.odFinishDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>
                                    </div>

                                </div>

                            </c:if>

                            <%-- 评价完成 --%>
                            <!-- 商品全部流程完成 -->
                            <c:if test="${orderDetails.odStates == 4}">

                                    <div class="state-rtop" >

                                        <!-- 提示信息 -->
                                        <div class="ftx-03">
                                            订单已经完成，感谢您在树懒商城购物，期待您的下次光临。
                                        </div>
                                    </div>

                                    <!-- 进度条 -->
                                    <div id="process-04" class="order-process">

                                        <!-- 提交订单上的图标 -->
                                        <div class="node daipingjia">
                                            <i class="node-icon icon-start"></i>

                                            <!-- 图标下的字体显示 -->
                                            <ul>
                                                <li class="txt1">&nbsp;</li>
                                                <li class="txt2">提交订单</li>
                                                <li id="track_time_00" class="txt3">
                                                    <fmt:formatDate value="${myorder.orderDate}" pattern="yyyy-MM-dd"/>
                                                    <br>
                                                    <fmt:formatDate value="${myorder.orderDate}" pattern="HH:mm:ss"/>
                                                </li>
                                            </ul>

                                        </div>


                                        <!-- 提交订单到付款成功中间的横线 -->
                                        <div class="proce done">
                                            <ul>
                                                <li class="txt1"></li>
                                            </ul>
                                        </div>


                                        <!-- 付款成功 -->
                                        <div class="node ready">

                                            <!-- 图标样式 -->
                                            <i class="node-icon daipingjia1"></i>

                                            <!-- 下方的付款成功的字体 -->
                                            <ul>
                                                <li class="txt1">&nbsp;</li>
                                                <li class="txt2">付款成功</li>
                                                <li id="track_time_4" class="txt3">
                                                    <fmt:formatDate value="${orderDetails.odPayDate}" pattern="yyyy-MM-dd"/>
                                                    <br>
                                                    <fmt:formatDate value="${orderDetails.odPayDate}" pattern="HH:mm:ss"/>
                                                </li>
                                            </ul>
                                        </div>


                                        <!-- 两个状态之间的横线 -->
                                        <div class="proce done">
                                            <ul>
                                                <li class="txt1">&nbsp;</li>
                                            </ul>
                                        </div>

                                        <!-- 商品出库时间 -->
                                        <div class="node ready">
                                            <i class="node-icon daipingjia2"></i>
                                            <ul>
                                                <li class="txt1">&nbsp;</li>
                                                <li class="txt2">商品出库</li>
                                                <li id="track_time_1" class="txt3">
                                                    <fmt:formatDate value="${orderDetails.odSendData}" pattern="yyyy-MM-dd"/>
                                                    <br>
                                                    <fmt:formatDate value="${orderDetails.odSendData}" pattern="HH:mm:ss"/>
                                                </li>
                                            </ul>
                                        </div>

                                        <!-- 商品出库与等待收货两个状态之间连接的横线 -->
                                        <div class="proce done">
                                            <ul>
                                                <li class="txt1">&nbsp;</li>
                                            </ul>
                                        </div>

                                        <!-- 等待收货状态信息 -->
                                        <div class="node ready">
                                            <i class="node-icon daipingjia"></i>
                                            <ul>
                                                <li class="txt1">&nbsp;</li>
                                                <li class="txt2">等待收货</li>
                                                <li id="track_time_5" class="txt3">
                                                    <fmt:formatDate value="${orderDetails.odReceiveDate}" pattern="yyyy-MM-dd"/>
                                                    <br>
                                                    <fmt:formatDate value="${orderDetails.odReceiveDate}" pattern="HH:mm:ss"/>
                                                </li>
                                            </ul>
                                        </div>

                                        <!-- 等待收获与完成两个状态之间的横下 -->
                                        <div class="proce done">
                                            <ul>
                                                <li class="txt1">&nbsp;</li>
                                            </ul>
                                        </div>

                                        <!-- 完成状态 -->
                                        <div class="node ready">
                                            <i class="node-icon daipingjiahh"></i>
                                            <ul>
                                                <li class="txt1">&nbsp;</li>
                                                <li class="txt2">完成</li>
                                                <li id="track_time_6" class="txt3">
                                                    <fmt:formatDate value="${orderDetails.odFinishDate}" pattern="yyyy-MM-dd"/>
                                                    <br>
                                                    <fmt:formatDate value="${orderDetails.odFinishDate}" pattern="HH:mm:ss"/>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>

                                </c:if>

                            <%-- 取消 --%>
                            <%-- 取消订单显示的样式 --%>
                            <c:if test="${orderDetails.odStates == -1}">
                                <div class="state-rtop">
                                    <!-- 提示信息 -->
                                    <div class="ftx-03">
                                        您的订单拦截成功，订单金额将返回您的付款账户，请注意查收。
                                    </div>
                                </div>

                                <!-- 进度条 -->
                                <div class="state-others">
                                    <strong></strong>
                                </div>

                                <div class="order-process " id="process-020">

                                    <!-- 提交申请盒子 -->
                                    <div class="node  ready">
                                        <i class="node-icon icon-startt"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">提交申请</li>
                                            <li class="txt3">
                                                <fmt:formatDate value="${myorder.orderDate}" pattern="yyyy-MM-dd"/>
                                                <br>
                                                <fmt:formatDate value="${myorder.orderDate}" pattern="HH:mm:ss"/>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 提交申请 系统处理 之间的横线 -->
                                    <div class="proce  done"></div>

                                    <!-- 系统处理盒子 -->
                                    <div class="node  ready">
                                        <i class="node-icon icon-request-cancel"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">系统处理</li>
                                            <li class="txt3"></li>
                                        </ul>
                                    </div>

                                    <!-- 系统处理 完成 之间的横线 -->
                                    <div class="proce  done">
                                        <ul>
                                            <li class="txt1"></li>
                                        </ul>
                                    </div>

                                    <!-- 完成盒子样式 -->
                                    <div class="node  ready">
                                        <i class="node-icon icon-cancel"></i>
                                        <ul>
                                            <li class="txt1">&nbsp;</li>
                                            <li class="txt2">完成</li>
                                            <li class="txt3"></li>
                                        </ul>
                                    </div>

                                </div>
                            </c:if>

                        </div>

                    </div>

                    <div class="mb"></div>

                </div>
            </c:if>

            <!-- 商品信息及其快递信息显示 -->
            <div class="order-track order-track-02 m order-track-new" style="display: none;">
                <div class="mt">
                    <div class="track-tab">
                        <ul>
                            <li class="tab-item curr" style="display:none;">订单跟踪</li>
                            <li class="tab-item" style="display:none;">安装跟踪</li>
                        </ul>
                    </div>
                </div>

                <!-- 订单跟踪 -->
                <div class="mc">
                    <div class="track-cont J-delivery-track">
                        <div class="track-lcol">
                            <div class="p-item">
                                <div class="p-img">
                                    <a href="">
                                        <img src="${product.proImg}" alt>
                                    </a>
                                </div>

                                <div class="p-info">
                                    <ul>
                                        <li>送货方式：</li>
                                        <li class="p-info-left">京东快递</li>
                                        <li>承运人：</li>
                                        <li class="p-info-left">普通快递</li>
                                    </ul>
                                </div>

                            </div>

                            <!-- 位置显示 -->
                            <div class="ac" style="display:none">
                                <a href="" class="btn-9 hide">查看地图</a>
                            </div>

                        </div>

                        <div class="track-rcol">
                            <div class="track-list track-list-date">
                                <ul>
                                    <li class="afterdate  node-to-change track-node-0008  first">
                                        <i class="node-icon">
                                            <i class="dot"></i>
                                            <i class="state-icon"></i>
                                        </i>
                                        <span class="date">
                                                  2021-03-14
                                                  <span class="week">周日</span>
                                              </span>
                                        <span class="time">16:44:06</span>
                                        <span class="txt">
                                                  <div class="stress-txt">已签收</div>
                                                  您的订单已由本人签收。如有疑问您可以联系配送员【马哈哈，15138940237】确认。感谢您在树懒购物，欢迎再次光临。
                                              </span>
                                    </li>
                                    <li class=" node-to-change track-node-0006 ">
                                        <i class="node-icon">
                                            <i class="dot"></i>
                                            <i class="state-icon"></i>
                                        </i>
                                        <span class="time">14:39:11</span>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

            </div>


            <!-- 收货地址信息显示 -->
            <div class="m order-info-mod">
                <div class="order-info order-info-new mc">
                    <div class="ui-switchable-body">
                        <div class="ui-switchable-panel-main">
                            <div class="ui-switchable-panel">

                                <!-- 收获人信息 -->
                                <div class="dl">
                                    <div class="dt">
                                        <h4>收货人信息</h4>
                                    </div>
                                    <div class="dd">
                                        <div class="item">
                                            <span class="label">收货人：</span>
                                            <div class="info-rcol">${address.addressName}</div>
                                        </div>
                                        <div class="item">
                                            <span class="label">地址：</span>
                                            <div class="info-rcol">${address.addressProvince}&nbsp;&nbsp;${address.addressCity}&nbsp;&nbsp;${address.addressTown}&nbsp;&nbsp;${address.addressStreet}&nbsp;&nbsp;${address.detailedAddress}</div>
                                        </div>
                                        <div class="item">
                                            <span class="label">手机号码：</span>
                                            <div class="info-rcol">${address.addressTelno}</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 配送信息 -->
                                <div class="dl">
                                    <div class="dt">
                                        <h4>配送信息</h4>
                                    </div>
                                    <div class="dd">
                                        <div class="item">
                                            <span class="label">配送方式：</span>
                                            <div class="info-rcol">
                                                京东快递
                                            </div>
                                        </div>
                                        <div class="item">
                                                  <span class="label">
                                                      期望送货日期：
                                                  </span>
                                            <div class="info-rcol">
                                                工作日、双休日与假日均可送货
                                            </div>
                                        </div>
                                        <div class="item">
                                            <span class="label"></span>
                                            <div class="info-rcol"></div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 付款信息 -->
                                <div class="dl" id="pay-info-nozero">
                                    <div class="dt">
                                        <h4>付款信息</h4>
                                    </div>
                                    <div class="dd">
                                        <div class="item">
                                            <span class="label">付款方式：</span>
                                            <div class="info-rcol">在线支付</div>
                                        </div>
                                        <div class="item">
                                            <div class="label">付款时间：</div>

                                            <c:if test="${empty orderDetails.odPayDate}">
                                                <div class="info-rcol">
                                                    未支付
                                                </div>
                                            </c:if>

                                            <c:if test="${!empty orderDetails.odPayDate}">
                                                <div class="info-rcol">
                                                    <fmt:formatDate value="${orderDetails.odPayDate}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
                                                </div>
                                            </c:if>

                                            <%--<div class="info-rcol">
                                                2021-03-12 10:01:06
                                            </div>--%>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品信息 -->
            <div class="order-goods m">
                <div class="mt goods-head">
                    <span class="shop-name">树懒</span>
                </div>

                <!-- 商品盒子 -->
                <div class="mc">

                    <!-- 商品 -->
                    <div class="goods-list ">
                        <table class="tb-void tb-order">
                            <colgroup>
                                <col class="grap">
                                <col class="col-goods">
                                <col class="col-number">
                                <col class="col-price">
                                <col class="col-amount">
                                <col class="col-bean">
                                <col class="col-ops">
                                <col class="grap">
                            </colgroup>

                            <!-- 商品的信息的提示 -->
                            <thead>
                            <tr>
                                <th class="grap"></th>
                                <th>商品</th>
                                <th>商品编号</th>
                                <th>树懒价</th>
                                <th>商品数量</th>
                                <th class="grap"></th>
                            </tr>
                            </thead>

                            <!-- 商品的全部信息 -->
                            <tbody>
                            <tr class="first-tr product-100009279875">
                                <td class="grap"></td>
                                <td>
                                    <div class="p-item">
                                        <div class="p-img">
                                            <a href="" target="_blank">
                                                <img src="${product.proImg}" data-lazy-img="done" width="60" height="60">
                                            </a>
                                        </div>

                                        <!-- 商品信息盒子 -->
                                        <div class="p-info">
                                            <div class="p-name">
                                                <!--<em class="p-supermarket" title="树懒商城"></em>-->
                                                <a class="a-link" href="" target="_blank" title="${product.proDesc}">${product.proDesc}</a>
                                            </div>
                                            <div class="clr"></div>
                                            <div id="coupon_100009279875" class="fl"></div>
                                            <div class="p-extra">
                                                <span class="txt">${product.proColor}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 七天无理由退货 -->
                                    <div class="p-tag mt10">
                                        <span style="display: none;">支持7天无理由退货</span>
                                    </div>
                                </td>

                                <!-- 商品编号 -->
                                <td>
                                    <span class="productNumber">${product.proNum}</span>
                                </td>

                                <!-- 商品价格 -->
                                <td>
                                    <span class="f-price">￥</span>
                                    <span class="f-price">${product.proPrice}</span>
                                </td>

                                <!-- 商品数量 -->
                                <td>
                                    <span class="productCount">${orderDetails.odProCount}</span>
                                </td>

                                <!-- 右边边距 -->
                                <td class="grap"></td>

                            </tr>
                            </tbody>

                        </table>
                    </div>

                    <!-- 商品价格信息 -->
                    <div class="goods-total">
                        <ul>

                            <!-- 商品总额 -->
                            <li>
                                <span class="label total_price">总价格：</span>
                                <span class="hh dollar_sign">￥</span>
                                <span class="txt">${product.proPrice * orderDetails.odProCount}</span>
                            </li>

                            <!-- 实际支付金额 -->
                            <li class="ftx-01">
                                <span class="label paid_amount">实付款：</span>
                                <span class="txt count paid_amount_dollar">￥</span>
                                <c:if test="${empty flow.flowCost}">
                                    <span class="txt count">未支付</span>
                                </c:if>
                                <c:if test="${!empty flow.flowCost}">
                                    <span class="txt count">${flow.flowCost}</span>
                                </c:if>
                                <%--<span class="txt count">${flow.flowCost}</span>--%>
                            </li>

                        </ul>
                    </div>

                </div>
            </div>

        </div>
    </div>

    <!--下方提示信息-->
    <div id="cmsfooter">
        <div id="service-2017">

            <!-- 多快好省 -->
            <div class="w hhzidingyi">
                <ol class="slogen">
                    <li class="item ">
                        <i>多</i>
                        品类齐全，轻松购物
                    </li>
                    <li class="item fore2">
                        <i>多</i>
                        多仓发货，极速配送
                    </li>
                    <li class="item fore3">
                        <i>好</i>
                        正品行货，精致服务
                    </li>
                    <li class="item fore4">
                        <i>省</i>
                        天天低价，畅选无忧
                    </li>
                </ol>
            </div>

            <!--下面的信息-->
            <div class="shulan-help">
                <div class="w hhzidingyi">
                    <div class="tishixinxi">
                        <span class="zititishixinxi">欢迎使用树懒商城，为您提供高质量的服务，是我们商城最高的追求！</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

</body>

</html>